
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <el-input type="text" disabled v-model="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">选择标识</div>
      <div class="w-3/4">
        <el-input
          type="text"
          placeholder="用于$('')查询"
          v-model.trim="current.selector"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <el-input type="text" v-model="current.describe" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-2/4 text-14">
        <el-link type="primary" @click="addCol">增加格栅</el-link>
      </div>
      <div class="w-2/4"></div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-100 pr-20 text-14">格栅间距</div>
      <div class="w-4/10">
        <el-input-number
          v-model="current.componentProps.gutter"
          size="small"
          :min="0"
          :max="100"
        />
      </div>
    </div>
    <template v-for="(item, index) in current.items" :key="index">
      <div class="flex items-center px-10">
        <div class="w-100 pr-15 text-14">格栅宽度{{ index }}</div>
        <div class="w-4/10 pr-15">
          <el-input-number
            v-model="item.componentProps.span"
            size="small"
            :min="1"
            :max="24"
          />
        </div>
        <div class="w-2/10 pr-15">
          <el-link type="primary" @click="removeCol(index, item)">删除</el-link>
        </div>
      </div>
    </template>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
import type { Component, CellImp } from "@/components/low-code/core/index";
import { Cell } from "@/components/low-code/core/cell";

export default defineComponent({
  name: "rowSetting",
  props: ["current"],
  setup(props) {
    const component = props.current as Component;
    let lowCode = component.getLowCodeInstance();
    const addCol = () => {
      const cell: CellImp = new Cell(
        {
          component: "col",
          key: "",
          componentProps: {
            span: 12,
            offset: 0,
          },
          items: [],
        },
        lowCode
      );
      component.items.push(cell);
    };

    const removeCol = (index: number, item: CellImp) => {
      component.items.splice(index, 1);
    };

    return { lowCode, addCol, removeCol };
  },
});
</script>

<style  scoped>
</style>
